/*
  学习目标：组件复用逻辑-小结
  方式:
     1. HOC
        本质: 是一个函数, 内部封装组件逻辑,  接收一个组件 , 返回一个组件
        缺点: 增加组件嵌套结构
     2. RenderProps
      本质: 
        2.1 是一个组件, 内部封装了组件逻辑, 
        2.2 接收一个名为render的props属性, render是函数, 决定如何渲染内容
      缺点: 
        1. 写法过于复杂
        2. 增加组件嵌套结构
     3. 👍自定义hooks
        本质: 是一个函数, 函数内部封装了组件逻辑(数据 和 方法), 返回数据和方法
*/
import React from 'react';
import { logMouse } from './hoc/logMouse';
import { useMouse } from './hooks/useMouse';
import { LogMouse } from './RenderProps/LogMouse';

const MyHeader = logMouse(Header);
const MyMain = logMouse(Main);

export default function App() {
  return (
    <div>
      {/* hooks */}
      <Header></Header>
      {/* hoc */}
      <MyHeader />
      <Main />
      {/* renderProps */}
      <LogMouse render={() => <Footer />} />
    </div>
  );
}

function Header() {
  const { mouse, handleMouseMove } = useMouse();
  return (
    <h1>
      header - <Main></Main>
    </h1>
  );
}

function Main() {
  const { mouse, handleMouseMove } = useMouse();
  return <h1>Main</h1>;
}

function Footer() {
  return (
    <h1>
      Footer - <LogMouse render={() => <Child />} />
    </h1>
  );
}

function Child() {
  return null;
}
